﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的询价 - 模切材料小管家</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            /* TDesign 工业品色彩系统 */
            --primary-color: #0052d9;
            --primary-light: #266fe8;
            --primary-dark: #003cab;
            --secondary-color: #f2f3ff;
            --accent-color: #e37318;
            --success-color: #00a870;
            --warning-color: #ed7b2f;
            --error-color: #d54941;
            
            /* 背景色系 */
            --bg-color-page: #f5f7fa;
            --bg-color-container: #ffffff;
            --bg-color-secondray: #f8f9fc;
            
            /* 边框和分割线 */
            --border-color: #e7e7e7;
            --border-color-light: #f0f0f0;
            --border-radius-small: 3px;
            --border-radius-medium: 6px;
            --border-radius-large: 9px;
            
            /* 文字色彩 */
            --text-primary: #1a1a1a;
            --text-secondary: #4e5969;
            --text-placeholder: #86909c;
            --text-disabled: #c9cdd4;
            
            /* 阴影系统 */
            --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-2: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
            --shadow-3: 0 4px 8px 0 rgba(0, 0, 0, 0.12);
            
            /* 间距系统 */
            --space-1: 4px;
            --space-2: 8px;
            --space-3: 12px;
            --space-4: 16px;
            --space-5: 20px;
            --space-6: 24px;
            --space-8: 32px;
            --space-10: 40px;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }
        
        body {
            background-color: var(--bg-color-page);
            color: var(--text-primary);
            font-size: 14px;
            line-height: 1.5;
            padding-bottom: 64px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        .container {
            max-width: 480px;
            margin: 0 auto;
            background: var(--bg-color-container);
            min-height: 100vh;
            box-shadow: var(--shadow-1);
            position: relative;
            overflow-x: hidden;
        }
        
        /* 头部样式 - TDesign 简约风格 */
        .header {
            background: var(--primary-color);
            color: white;
            padding: var(--space-4) var(--space-4) var(--space-5);
            position: relative;
            z-index: 10;
        }
        
        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-4);
        }
        
        .back-btn {
            font-size: 18px;
            cursor: pointer;
            opacity: 0.9;
            transition: opacity 0.2s ease;
        }
        
        .back-btn:hover {
            opacity: 1;
        }
        
        .page-title {
            font-weight: 500;
            font-size: 16px;
        }
        
        .actions {
            display: flex;
            gap: var(--space-5);
        }
        
        .actions i {
            font-size: 16px;
            cursor: pointer;
            opacity: 0.9;
            transition: opacity 0.2s ease;
        }
        
        .actions i:hover {
            opacity: 1;
        }
        
        /* 询价状态标签 - TDesign 简约风格 */
        .inquiry-tabs {
            background: var(--bg-color-container);
            padding: var(--space-3) var(--space-4);
            border-bottom: 1px solid var(--border-color-light);
            display: flex;
            gap: var(--space-2);
            overflow-x: auto;
        }
        
        .tab-item {
            padding: var(--space-2) var(--space-4);
            border-radius: var(--border-radius-medium);
            font-size: 12px;
            background: var(--bg-color-secondray);
            color: var(--text-secondary);
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
            border: 1px solid var(--border-color-light);
        }
        
        .tab-item:hover {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        .tab-item.active {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        /* 询价列表 - TDesign 简约风格 */
        .inquiries-section {
            padding: var(--space-4);
        }
        
        .section-title {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: var(--space-4);
            color: var(--text-primary);
            display: flex;
            align-items: center;
        }
        
        .section-title i {
            margin-right: var(--space-2);
            color: var(--warning-color);
            font-size: 14px;
        }
        
        .inquiry-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
        }
        
        .inquiry-item {
            background: var(--bg-color-container);
            border-radius: var(--border-radius-medium);
            padding: var(--space-4);
            box-shadow: var(--shadow-1);
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
            border: 1px solid var(--border-color-light);
            position: relative;
            overflow: hidden;
        }
        
        .inquiry-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 3px;
            height: 100%;
            background: var(--warning-color);
            border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
        }
        
        .inquiry-item:hover {
            border-color: var(--primary-color);
            box-shadow: var(--shadow-2);
        }
        
        .inquiry-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: var(--space-2);
        }
        
        .inquiry-title {
            font-weight: 500;
            font-size: 14px;
            color: var(--text-primary);
            flex: 1;
            margin-right: var(--space-2);
        }
        
        .inquiry-status {
            font-size: 11px;
            padding: var(--space-1) var(--space-2);
            border-radius: var(--border-radius-small);
            font-weight: 500;
        }
        
        .status-pending {
            background: rgba(255, 193, 7, 0.1);
            color: #ffc107;
            border: 1px solid rgba(255, 193, 7, 0.2);
        }
        
        .status-replied {
            background: rgba(0, 168, 112, 0.1);
            color: var(--success-color);
            border: 1px solid rgba(0, 168, 112, 0.2);
        }
        
        .status-quoted {
            background: rgba(0, 82, 217, 0.1);
            color: var(--primary-color);
            border: 1px solid rgba(0, 82, 217, 0.2);
        }
        
        .status-expired {
            background: rgba(108, 117, 125, 0.1);
            color: #6c757d;
            border: 1px solid rgba(108, 117, 125, 0.2);
        }
        
        .inquiry-content {
            color: var(--text-secondary);
            font-size: 12px;
            margin-bottom: var(--space-3);
            line-height: 1.4;
        }
        
        .inquiry-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--text-placeholder);
            font-size: 11px;
            margin-bottom: var(--space-2);
        }
        
        .inquiry-company {
            display: flex;
            align-items: center;
        }
        
        .inquiry-company i {
            margin-right: var(--space-1);
            color: var(--primary-color);
            font-size: 10px;
        }
        
        .inquiry-time {
            color: var(--text-placeholder);
            font-size: 11px;
        }
        
        .inquiry-reply {
            background: var(--bg-color-secondray);
            border-radius: var(--border-radius-small);
            padding: var(--space-2);
            margin-bottom: var(--space-2);
            border: 1px solid var(--border-color-light);
        }
        
        .reply-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-1);
        }
        
        .reply-company {
            font-size: 11px;
            font-weight: 500;
            color: var(--text-primary);
        }
        
        .reply-time {
            font-size: 10px;
            color: var(--text-placeholder);
        }
        
        .reply-content {
            font-size: 11px;
            color: var(--text-secondary);
            line-height: 1.4;
        }
        
        .inquiry-actions {
            display: flex;
            gap: var(--space-2);
        }
        
        .action-btn {
            flex: 1;
            padding: var(--space-1) var(--space-2);
            border-radius: var(--border-radius-small);
            border: none;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .action-btn.btn-primary {
            background: var(--primary-color);
            color: white;
        }
        
        .action-btn.btn-primary:hover {
            background: var(--primary-light);
        }
        
        .action-btn.btn-secondary {
            background: var(--bg-color-secondray);
            color: var(--text-primary);
            border: 1px solid var(--border-color-light);
        }
        
        .action-btn.btn-secondary:hover {
            background: var(--border-color-light);
        }
        
        .action-btn.btn-success {
            background: var(--success-color);
            color: white;
        }
        
        .action-btn.btn-success:hover {
            background: #00a870;
        }
        
        /* 底部导航 - TDesign 简约风格 */
        .tabbar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--bg-color-container);
            display: flex;
            border-top: 1px solid var(--border-color);
            z-index: 100;
            max-width: 480px;
            margin: 0 auto;
            height: 64px;
        }
        
        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: var(--space-2) 0;
            color: var(--text-placeholder);
            font-size: 10px;
            cursor: pointer;
            transition: color 0.2s ease;
        }
        
        .tab-item.active {
            color: var(--primary-color);
        }
        
        .tab-item:hover {
            color: var(--primary-light);
        }
        
        .tab-item i {
            font-size: 18px;
            margin-bottom: var(--space-1);
        }
        
        /* 空状态 - TDesign 简约风格 */
        .empty-state {
            text-align: center;
            padding: var(--space-10) var(--space-5);
            color: var(--text-placeholder);
        }
        
        .empty-state i {
            font-size: 48px;
            margin-bottom: var(--space-4);
            color: var(--border-color);
        }
        
        .empty-state h3 {
            font-size: 14px;
            margin-bottom: var(--space-2);
            color: var(--text-secondary);
            font-weight: 500;
        }
        
        .empty-state p {
            font-size: 12px;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 头部区域 -->
        <div class="header">
            <div class="top-bar">
                <div class="back-btn" onclick="history.back()">
                    <i class="fas fa-arrow-left"></i>
                </div>
                <div class="page-title">我的询价</div>
                <div class="actions">
                    <i class="fas fa-plus" onclick="newInquiry()"></i>
                </div>
            </div>
        </div>
        
        <!-- 询价状态标签 -->
        <div class="inquiry-tabs">
            <div class="tab-item active" onclick="switchTab('all')">全部</div>
            <div class="tab-item" onclick="switchTab('pending')">待回复</div>
            <div class="tab-item" onclick="switchTab('replied')">已回复</div>
            <div class="tab-item" onclick="switchTab('quoted')">已报价</div>
            <div class="tab-item" onclick="switchTab('expired')">已过期</div>
        </div>
        
        <!-- 询价列表 -->
        <div class="inquiries-section">
            <div class="section-title">
                <i class="fas fa-question-circle"></i>
                询价记录
            </div>
            
            <div class="inquiry-list">
                <!-- 询价项目1 -->
                <div class="inquiry-item" onclick="viewInquiry(1)">
                    <div class="inquiry-header">
                        <div class="inquiry-title">OCA光学胶询价</div>
                        <div class="inquiry-status status-replied">已回复</div>
                    </div>
                    <div class="inquiry-content">
                        需要厚度0.05-0.2mm的OCA光学胶，透光率90%+，数量100kg，请提供详细报价和技术参数
                    </div>
                    <div class="inquiry-meta">
                        <div class="inquiry-company">
                            <i class="fas fa-building"></i>
                            <span>华强材料有限公司</span>
                        </div>
                        <div class="inquiry-time">2024-01-15 询价</div>
                    </div>
                    <div class="inquiry-reply">
                        <div class="reply-header">
                            <div class="reply-company">华强材料有限公司</div>
                            <div class="reply-time">2小时前</div>
                        </div>
                        <div class="reply-content">
                            感谢您的询价，我们可以提供符合要求的产品，价格在50-80元/kg，具体价格根据数量确定...
                        </div>
                    </div>
                    <div class="inquiry-actions">
                        <button class="action-btn btn-secondary">
                            <i class="fas fa-eye"></i> 查看详情
                        </button>
                        <button class="action-btn btn-primary">
                            <i class="fas fa-comments"></i> 继续沟通
                        </button>
                    </div>
                </div>
                
                <!-- 询价项目2 -->
                <div class="inquiry-item" onclick="viewInquiry(2)">
                    <div class="inquiry-header">
                        <div class="inquiry-title">单面胶带散料询价</div>
                        <div class="inquiry-status status-quoted">已报价</div>
                    </div>
                    <div class="inquiry-content">
                        对您发布的单面胶带散料很感兴趣，规格25-75mm，厚度0.1-0.2mm，请提供价格和库存情况
                    </div>
                    <div class="inquiry-meta">
                        <div class="inquiry-company">
                            <i class="fas fa-building"></i>
                            <span>杭州电子科技有限公司</span>
                        </div>
                        <div class="inquiry-time">2024-01-14 询价</div>
                    </div>
                    <div class="inquiry-reply">
                        <div class="reply-header">
                            <div class="reply-company">杭州电子科技有限公司</div>
                            <div class="reply-time">1天前</div>
                        </div>
                        <div class="reply-content">
                            已为您提供详细报价单，价格30-50元/kg，库存充足，可提供样品测试...
                        </div>
                    </div>
                    <div class="inquiry-actions">
                        <button class="action-btn btn-secondary">
                            <i class="fas fa-eye"></i> 查看报价
                        </button>
                        <button class="action-btn btn-success">
                            <i class="fas fa-shopping-cart"></i> 立即下单
                        </button>
                    </div>
                </div>
                
                <!-- 询价项目3 -->
                <div class="inquiry-item" onclick="viewInquiry(3)">
                    <div class="inquiry-header">
                        <div class="inquiry-title">PET保护膜询价</div>
                        <div class="inquiry-status status-pending">待回复</div>
                    </div>
                    <div class="inquiry-content">
                        需要厚度0.05-0.12mm的PET保护膜，宽度20-100mm，数量200kg，请提供报价和交期
                    </div>
                    <div class="inquiry-meta">
                        <div class="inquiry-company">
                            <i class="fas fa-building"></i>
                            <span>深圳材料科技</span>
                        </div>
                        <div class="inquiry-time">2024-01-13 询价</div>
                    </div>
                    <div class="inquiry-actions">
                        <button class="action-btn btn-secondary">
                            <i class="fas fa-eye"></i> 查看详情
                        </button>
                        <button class="action-btn btn-primary">
                            <i class="fas fa-comments"></i> 催回复
                        </button>
                    </div>
                </div>
                
                <!-- 询价项目4 -->
                <div class="inquiry-item" onclick="viewInquiry(4)">
                    <div class="inquiry-header">
                        <div class="inquiry-title">导电胶带询价</div>
                        <div class="inquiry-status status-replied">已回复</div>
                    </div>
                    <div class="inquiry-content">
                        需要电阻<0.1Ω的导电胶带，厚度0.08-0.15mm，数量150kg，请提供技术参数和价格
                    </div>
                    <div class="inquiry-meta">
                        <div class="inquiry-company">
                            <i class="fas fa-building"></i>
                            <span>东莞精密材料</span>
                        </div>
                        <div class="inquiry-time">2024-01-12 询价</div>
                    </div>
                    <div class="inquiry-reply">
                        <div class="reply-header">
                            <div class="reply-company">东莞精密材料</div>
                            <div class="reply-time">2天前</div>
                        </div>
                        <div class="reply-content">
                            我们的产品完全符合您的要求，电阻<0.05Ω，价格60-100元/kg，可提供检测报告...
                        </div>
                    </div>
                    <div class="inquiry-actions">
                        <button class="action-btn btn-secondary">
                            <i class="fas fa-eye"></i> 查看详情
                        </button>
                        <button class="action-btn btn-primary">
                            <i class="fas fa-comments"></i> 继续沟通
                        </button>
                    </div>
                </div>
                
                <!-- 询价项目5 -->
                <div class="inquiry-item" onclick="viewInquiry(5)">
                    <div class="inquiry-header">
                        <div class="inquiry-title">胶带加工服务询价</div>
                        <div class="inquiry-status status-expired">已过期</div>
                    </div>
                    <div class="inquiry-content">
                        需要专业胶带加工服务，支持各种规格定制，请提供加工能力和价格
                    </div>
                    <div class="inquiry-meta">
                        <div class="inquiry-company">
                            <i class="fas fa-building"></i>
                            <span>苏州制造有限公司</span>
                        </div>
                        <div class="inquiry-time">2024-01-10 询价</div>
                    </div>
                    <div class="inquiry-actions">
                        <button class="action-btn btn-secondary">
                            <i class="fas fa-eye"></i> 查看详情
                        </button>
                        <button class="action-btn btn-primary">
                            <i class="fas fa-redo"></i> 重新询价
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部导航 -->
        <div class="tabbar">
            <div class="tab-item" onclick="location.href='home.html'">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="tab-item" onclick="location.href='demand-list.html'">
                <i class="fas fa-search"></i>
                <span>求购</span>
            </div>
            <div class="tab-item" onclick="location.href='publish-select.html'">
                <i class="fas fa-plus-circle"></i>
                <span>发布</span>
            </div>
            <div class="tab-item" onclick="location.href='my-messages.html'">
                <i class="fas fa-comments"></i>
                <span>客服</span>
            </div>
            <div class="tab-item active">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
    </div>
    
    <script>
        // 切换询价状态标签
        function switchTab(status) {
            document.querySelectorAll('.inquiry-tabs .tab-item').forEach(tab => {
                tab.classList.remove('active');
            });
            event.target.classList.add('active');
            
            // 这里可以根据状态过滤询价
            console.log('切换到询价状态:', status);
        }
        
        // 查看询价详情
        function viewInquiry(inquiryId) {
            alert(`查看询价详情 ID: ${inquiryId}`);
        }
        
        // 新建询价
        function newInquiry() {
            alert('正在跳转到新建询价页面...');
        }
        
        // 筛选询价
        function filterInquiries() {
            alert('正在打开筛选选项...');
        }
        
        // 询价操作按钮点击
        document.querySelectorAll('.action-btn').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const action = this.textContent.includes('查看详情') ? '查看详情' : 
                              this.textContent.includes('查看报价') ? '查看报价' : 
                              this.textContent.includes('继续沟通') ? '继续沟通' : 
                              this.textContent.includes('立即下单') ? '立即下单' : 
                              this.textContent.includes('催回复') ? '催回复' : '重新询价';
                alert(`正在${action}...`);
            });
        });
        
        // 询价项目点击效果
        document.querySelectorAll('.inquiry-item').forEach(item => {
            item.addEventListener('click', function() {
                this.style.transform = 'scale(0.98)';
                setTimeout(() => {
                    this.style.transform = '';
                }, 150);
            });
        });
        
        // 标签点击效果
        document.querySelectorAll('.inquiry-tabs .tab-item').forEach(item => {
            item.addEventListener('click', function() {
                this.style.transform = 'scale(0.95)';
                setTimeout(() => {
                    this.style.transform = '';
                }, 150);
            });
        });
    </script>
</body>
</html>


